<template>
<div class="functions">
  <img class="functions__banner" :src="banner"/>
  <div class="functions__cdz_container">
      <div class="functions__cdz">充电桩部分</div>
      <div class="functions__cdz_pic">
        <div><img :src="scan" alt=""><div class="chint">1、扫码充电</div></div>
        <div><img :src="ic" alt=""><div class="chint">2、IC卡充电</div></div>
        <div><img :src="keyboard" alt=""><div class="chint">3、按键区</div></div>
      </div>
  </div>
  <div class="functions__gzh_container">
  <div class="functions__gzh">公众号部分</div>
      <div class="functions__sub_title index_title">
        一、首页
        <div class="bg_title"></div>
      </div>
      <div class="functions__steps">
        <ul>
          <li>1.查看附近的电站</li>
          <li>2.点击扫码充电</li>
          <li>3.点击输入编号充电</li>
          <li>4.标签切换内容区</li>
        </ul>
      </div>
    <img class="functions__index_img" :src="index" alt="">

    <div class="functions__sub_title chongzhi_title">
      一、充值页面
      <div class="bg_title"></div>
    </div>
    <div class="functions__steps">
      <ul>
        <li>1.账户余额充值：快速充值、自定义充值</li>
        <li>2.电卡余额充值：快速充值、自定义充值</li>
      </ul>
    </div>
    <img class="functions__chongzhi_img" :src="chongzhi" alt="">


    <div class="functions__sub_title mine_title">
      一、我的
      <div class="bg_title"></div>
    </div>
    <div class="functions__steps">
      <ul>
        <li>1.余额</li>
        <li>2.代金券（可以免费充电）</li>
        <li>3.积分（可以免费充电）</li>
      </ul>
    </div>
    <img class="functions__mine_img" :src="mine" alt="">

    <div class="functions__steps">
      <ul>
        <li>4.订单管理 </li>
        <li> 5.卡管理</li>
        <li>6.客服热线</li>
        <li>7.问题反馈</li>
        <li> 8.用户指南 </li>
        <li> 9.快速充值</li>
        <li> 10.手机号绑定 </li>
        <li> 分销商（用户无法使用） </li>
      </ul>
    </div>

    <img class="functions__order_img" :src="order" alt="">

  </div>
  <img class="gzh_instruction__footer_img" :src="footer" alt="">

</div>
</template>

<script>
    import banner from "@/assets/image/functions/banner.jpg";
    import scan from "@/assets/image/functions/scan.jpg";
    import ic from "@/assets/image/functions/ic.jpg";
    import keyboard from "@/assets/image/functions/keyboard.jpg";
    import index from "@/assets/image/functions/index.jpg";
    import chongzhi from "@/assets/image/functions/chongzhi.jpg";
    import mine from "@/assets/image/functions/mine.jpg";
    import order from "@/assets/image/functions/order.jpg";
    import footer from "@/assets/image/functions/footer.png";

    export default {
        data() {
            return {
                banner: banner,
                scan: scan,
                ic: ic,
                keyboard: keyboard,
                index: index,
                chongzhi: chongzhi,
                mine: mine,
                order: order,
                footer:footer
            };
        },
        methods:{

        },
        mounted() {

        }
    };
</script>
<style scoped>

</style>
